<template>
  <div id="childB">
    <h1>B组件</h1>
    <button @click="transform">向A发送信息</button>
    <p>因为你点了A，所以我的信息发生了变化：{{aMessage}}</p>
  </div>
</template>
<script>
export default {
  data () {
    return {
      bMessage: 'Hello，A组件，我是B组件'
      // aMessage: this.$store.state.aMessage //
    }
  },
  computed: {
    aMessage () {
      // 注意：这里不写到data中是因为这里的数据要实时监听，state一旦发生变化
      // 页面中就要有相应改变
      return this.$store.state.aMessage
    }
  },
  methods: {
    transform () {
      this.$store.commit('transformA', { message: this.bMessage })
    }
  }
}
</script>
